<template>
  <div>
    <Card>
      <div slot="title">
        <Button type="success" @click="show('add')">添加</Button>
      </div>

    <Table type="index" :data="listData" :columns="listColumns" stripe></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="current" @on-change="changePage"></Page>
      </div>
    </div>
    </Card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        limit: 0,
        page: 0,
        current: 1,
        total: 100,
        listData: [],
        listColumns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: "标题",
            key: "title"
          },
          {
            title: "类型",
            key: "type"
          },
          {
            title: "场地",
            key: "place"
          },
          {
            title: "开始时间",
            key: "beginOn"
          },
          {
            title: "起价",
            key: "minPrice"
          },
          {
            title: "状态",
            key: "status"
          },
          {
            title: "描述",
            key: "shortDesc",
          },
          {
            title: "最新修改",
            key: "updatedOn",
            render: (h, params) => {
              return h('div', new Date(params.row.updatedOn * 1000).toLocaleString())
            }
          },
          {
            title: "操作",
            key: "action",
            width: 250,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h("Button",
                  {
                    props: {
                      icon: "edit",
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.row.id);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      width: 200,
                      title: "您确认删除这条内容吗？"
                    },
                    on: {
                      'on-ok': () => {
                        this.remove(params.row.id);
                      }
                    }
                  },
                  [h("Button", {
                    props: {
                      icon: "trash-a",
                      type: "error",
                      size: "small"
                    }
                  }, "删除")]
                )
              ]);
            }
          }
        ]
      };
    },
    methods: {
      init() {
        this.limit = 10;
        this.page = 0;
        this.current = 1;
        this.total = 100;
        this.mockListData(1);
      },
      mockListData(init) {
        this.$axios({
          method: 'get',
          url: '/api/concert',
          params: {
            page: this.page,
            limit: this.limit,
            init: init,
          }
        }).then((res) => {
          this.total = res.data.request.total;
          this.listData = res.data.result;
          this.$Notice.success({
            title: '加载成功!'
          });
        }).catch((error) => {
          this.$Notice.error({
            title: '加载失败!'
          });
          console.log(error);
        });
      },
      show(itemId) {
        this.$router.push({
          path: `concert/${itemId}`
        });
      },
      remove(id) {
        this.$axios({
          method: 'delete',
          url: `/api/concert/${id}`,
        }).then(res => {
          console.log(res);
          this.$Notice.success({
            title: '删除成功!'
          });
          this.init();
        }).catch(error => {
          this.$Notice.error({
            title: '删除失败!'
          });
          console.log(error);
        });
      },
      changePage(index) {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        this.page = index;
        this.mockListData(1);
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
